<template>
	<!-- 添加购物车接口调用失败 -->
	<view class="page">
		<view class="topbar">
			<text class="back" @tap="goback()"> < </text>
			<text>商品详情</text>
		</view>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
		    <swiper-item v-for="item in imgslist">
		        <image :src="item"></image>
		    </swiper-item>
		</swiper>
		<view class="star">
			<image src="../../static/icons/collect.png" mode=""></image>
		</view>
		<view class="info">
			<view class="name">{{goodItem.detail_title}}</view>
			<view class="desc">{{goodItem.detail_desc}}</view>
			<view class="price">￥{{goodItem.price_now}}</view>
		</view>
		<view class="intro" v-html="content"></view>
		<view class="bottom">
			<view class="left"></view>
			<view class="right">
				<text class="cart" @tap="addcart">添加到购物车</text>
				<text class="buy" @tap="buynow">立即购买</text>
			</view>
		</view>
		<view class="mask" v-show="flag">
			<view class="buycard">
				<image class="img" :src="chooseImg"></image>
				<view class="name"></view>
				<view class="num" v-model="count">库存数量：{{this.count}}</view>
				<view class="close" @click="close()">
					<image src="../../static/icons/x.png"></image>
				</view>
				<view class="color-area">
					<text>颜色分类</text>
					<view :class="{'active':currentId==item.id}" v-for="item in skulist" @click="chooseColor(item)">{{item.color_text}}</view>
				</view>
				<view class="service">
					<view class="common-title">特色服务</view>
					<view class="work">
						<view class="work-item">送货上门</view>
						<view class="work-item">上门安装</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="count-area">
					<view class="common-title">购买数量</view>
					<view class="count-steps">
						<view class="reduce">
							<text @tap="decre">-</text>
						</view>
						<view class="num">
							<text v-model="goodsNum">{{goodsNum}}</text>
						</view>
						<view class="add" @tap="incre">+</view>
					</view>
				</view>
				<view class="btn" @tap="confirm">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsApi from '@/api/kind/goods.js'
	import { addCart,updateCart } from "../../api/mine/cart.js"
	import { addOrderBatch } from '../../api/order/order.js'
	export default{
		data(){
			return{
				mark:'cart',
				goodsNum:1,
				chooseImg:'',
				count:'',
				flag:false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				productId:'',
				goodItem:{},
				imgslist:[],
				content:'',
				skulist:[],
				skuId:'',
				currentId:'',
				userId:'',
				choosenItem:{},
				name:''
			}
		},
		onLoad(option){
			this.productId = option.productId
			this.getGoodItem()
		},
		methods:{
			decre(){
				if(this.goodsNum > 1){
					this.goodsNum--

				}else{
					this.goodsNum = 1
				}
			},
			incre(){
				if(this.goodsNum < this.count ){
					this.goodsNum++
				}else{
					this.goodsNum = this.count
				}
			},
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			chooseColor(item){
				console.log(item)
				uni.setStorageSync('choosenItem',JSON.stringify(item))
				this.count = item.count
				var i = this.skulist.findIndex(el=>el.id==item.id)
				this.chooseImg = this.imgslist[i]
				this.skuId = this.currentId = this.skulist[i].id
			},
			close(){
				this.flag = false
			},
			addcart(){
				this.flag = true
				this.mark = 'cart'
				this.count = this.skulist[0].count
				this.chooseImg = this.imgslist[0]
			},
			buynow(){
				this.flag = true
				this.mark = 'buy'
			},
			confirm(){
				if(this.mark === 'cart'){
					try {
					    const value = uni.getStorageSync('userData');
						// console.log(value)
					    if (value) {
						   var info = JSON.parse(value)
					       this.userId = info.id
						   addCart({
						   	skuId:this.skuId,
						   	count:this.goodsNum,
						   	userId:'bdecbb72264e4ec581061d4770a2e914'
						   })
						   .then(res =>{
						   	console.log(res);
						   })
					    }
					} catch (e) {
					    // error
					}
					
				}else if(this.mark === 'buy'){
					this.choosenItem = JSON.parse(uni.getStorageSync('choosenItem'))
					console.log(this.choosenItem )
					// console.log(this.goodsNum)
					uni.navigateTo({
					    url: `/pages/mine/order/orderdetail?choosenItem=${this.choosenItem}&buyCount=${this.goodsNum}`
					});
				}
			},
			async getGoodItem(){
				var res = await goodsApi.goodDetail({
					productId:this.productId,
				})
				console.log(res)
				this.goodItem = res.data
				this.name = res.data.gname
				this.skulist = res.data.skuList
				// console.log(this.skulist)
				this.imgslist = this.goodItem.imgs.split(',')
				this.content = this.goodItem.content
			},	
		}
	}
</script>

<style lang="scss" scoped>
.page{
	position: relative;
	.topbar{
		position: fixed;
		left: 0;
		top: 0;
		background-color: #354e44;
		color: #fff;
		width: 100%;
		height: 44px;
		line-height: 44px;
		text-align: center;
		z-index: 998;
		.back{
			font-size: 24px;
			position: absolute;
			left: 20px;
		}
	}
	.swiper{
		position: relative;
		width: 375px;
		height: 317px;
		margin-top: 44px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.star{
		width: 50px;
		height: 50px;
		position: absolute;
		top:317px;
		right: 50px;
		background: #354E44;
		border-radius: 50%;
		margin-top: -25px;
		image{
			width: 22px;
			height: 22px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
	}
	.info{
		width: 375px;
		height: 107px;
		padding: 0 34px 34px;
		box-sizing: border-box;
		margin-top: 30px;
		view{
			margin-top: 10px;
		}
		.desc{
			font-size: 15px;
			color: #B0B0B0;
			line-height: 1.5;
		}
	}
	.intro{
		box-sizing: border-box;
		padding: 34px;
		overflow: hidden;
		// margin-bottom: 60px;
	}
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 888;
		display: flex;
		box-sizing: border-box;
		padding: 0 30px;
		justify-content: space-between;
		background-color: #fff;
		align-items: center;
		height: 60px;
		.left{
			width: 30px;
			height: 30px;
			background: url('../../static/icons/kf.png') no-repeat 0 center;
			background-size: 20px 20px;
		}
		.right{
			display: flex;
			justify-content: center;
			height: 100%;
			.cart{
				width: 119px;
				height: 40px;
				margin-top: 10px;
				font-size: 15px;
				color: #fff;
				line-height: 40px;
				text-align: center;
				background-color: #E2E2E2;
				color: #8F8F94;
			}
			.buy{
				width: 119px;
				height: 40px;
				margin-top: 10px;
				font-size: 15px;
				color: #fff;
				line-height: 40px;
				text-align: center;
				background-color: #354E44;
			}
		}
	}
	.mask{
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	    background-color: rgba(0, 0, 0, 0.5);
	    z-index: 888;
		.buycard{
		    position: absolute;
		    left: 50%;
		    top: 114px;
		    margin-left: -157px;
		    width: 314px;
		    height: 463px;
		    background: #FFFFFF;
		    border-radius: 40px;
		    border-radius: 40px;
		    border-radius: 20px;
			.img{
				position: absolute;
			    width: 96px;
			    height: 96px;
			    background-color: pink;
			    left: 31px;
			    top: -28px;
			    border-radius: 5px;
			}
			.name{
			    font-size: 14px;
			    color: #3E3E3E;
			    margin-left: 142px;
			    margin-top: 42px;
			    font-weight: 600;
			}
			.num{
			    font-size: 12px;
			    margin-top: 3px;
			    line-height: 16px;
			    margin-left: 142px;
			}
			.close{
			    position: absolute;
			    right: 31px;
			    top: 31px;
			    width: 21px;
			    height: 21px;
				image{
				    width: 100%;
				    height: 100%;
				}
			}
			.color-area{
				width: 314px;
				// height: 88px;
				margin-top: 10px;
				box-sizing: border-box;
				padding: 14px 28px;
				overflow: hidden;
				view{
					box-sizing: border-box;
					float: left;
					width: 121px;
					height: 30px;
					color: #3E3E3E;
					font-size: 13px;
					text-align: center;
					line-height: 30px;
					background: #F2F4F3;
					border-radius: 10px;
					margin: 5px;
					&:nth-child(2n-1){
						margin-left: 0;
					}
					&.active{
					border: 2px solid #354E44;
					}
				}
				text{
					display: block;
					font-size: 14px;
					color: #3E3E3E;
					line-height: 20px;
					letter-spacing: 2px;
					font-weight: 600;
					text-indent: 1em;
				}			
			}
			.service{
				width: 314px;
				height: 90px;
			    box-sizing: border-box;
			    padding: 0 28px;
				.common-title{
					font-size: 14px;
					color: #3E3E3E;
					line-height: 20px;
					letter-spacing: 2px;
					font-weight: 600;
				}
				.work{
					width: 258px;
					height: 65px;
					.work-item{
					    width: 100%;
					    height: 30px;
					    color: #3E3E3E;
					    font-size: 13px;
					    text-align: center;
					    line-height: 30px;
					    background: #F2F4F3;
					    border-radius: 10px;
					    border-radius: 10px;
					    margin: 5px auto;
					    text-align: left;
					    text-indent: 1em;
					}
				}
			}
			.line{
				width: 265px;
			    height: 1px;
			    background-color: #F2F4F3;
			    margin: 18px auto;
			}
			.count-area{
				box-sizing: border-box;
			    padding: 0 28px;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
				.common-title{
				    font-size: 14px;
				    color: #3E3E3E;
				    line-height: 20px;
				    letter-spacing: 2px;
				    font-weight: 600;
				}
				.count-steps{
				    display: flex;
				    justify-content: center;
					.reduce{
						width: 30px;
					    height: 30px;
					    background: #F1ECE7;
					    border-radius: 50%;
					    text-align: center;
					    line-height: 30px;
					    font-size: 15px;
					    margin: 0 3px;
						text{
						    text-align: center;
						    line-height: 30px;
						    font-size: 15px;
						}
					}
					.num{
					    width: 45px;
						height: 30px;
					    background: #F1ECE7;
						border-radius: 15px;
					    text-align: center;
					    line-height: 30px;
					    font-size: 15px;
					    margin: 0 3px;
						text{
							text-align: center;
						    line-height: 30px;
						    font-size: 15px;
						}
					}
					.add{
						width: 30px;
					    height: 30px;
					    background: #F1ECE7;
					    border-radius: 50%;
					    text-align: center;
					    line-height: 30px;
					    font-size: 15px;
					    margin: 0 3px;
						text{
						    text-align: center;
						    line-height: 30px;
						    font-size: 15px;
						}
					
					}
				}
			}
			.btn{
				width: 104px;
			    height: 40px;
			    background: #354E44;
			    border-radius: 14px;
			    border-radius: 14px;
			    margin: 24px auto;
			    color: #fff;
			    font-size: 16px;
			    text-align: center;
			    line-height: 40px;
			}
					
		}
	}
}
</style>
